{% extends 'common/panel.html' %}
{% block title %}{% endblock title %}
{% block panel %}
<script type="text/javascript" charset="utf-8">
    lingcod.onShow(function(){
        $('#search_panel input').focus();
        $('#search_panel').parent().parent().parent().css('overflow', 'hidden');
        $(window).bind('resize', $.debounce(500, rsList));
        rsList();
        $('a.close img').attr('src');
        setupAutocomplete($('#query'));
        loadImages($('#search_list'));
    });
    
    lingcod.onHide(function(){
        $(window).unbind(rsList);
    });
</script>
<div id="search_panel" style="">
    <a class="close" href="#"><img src="{{MEDIA_URL}}common/images/close.png" /></a>
    <h3>Species Data - {{project.name}}</h3>
    <form>
        <input type="text" id='query' autocomplete="off" />
    </form>
    <a class="button"><span>Search</span></a>
    <br style="clear:both;" />
    <p>You can search for species by scientific or common name.</p>
</div>
<div id="search_list">
    <ul>
        {# {% for object in taxa %} #}
        {#     {% include "monitoring/search_result.html" %} #}
        {# {% endfor %} #}
    </ul>
</div>
<div id="search_footer">
    <div class="powered"></div>
    <p>results <span class="offset">{{offset}}</span> - <span class="offset2">{{offset2}}</span> of <span class="count">{{count}}</span> <a href="#" class="nav back">prev</a> | <a href="#" class="nav forward">next</a></p>
</div>
{% endblock panel %}